import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { MenuAll } from './api';
import { computed, ref } from 'vue';

//
export const MenuList = ref([]);

export const formOptions: VbenFormProps = {
  schema: [
    {
      label: '菜单名称',
      component: 'Input',
      fieldName: 'menuName',
      componentProps: {
        placeholder: '请输入菜单名称',
        allowClear: true,
      },
    },
    {
      label: '状态',
      component: 'Select',
      fieldName: 'status',
      componentProps: {
        placeholder: '请选择菜单状态',
        allowClear: true,
        options: [
          {
            label: '启用',
            value: '0',
          },
          {
            label: '停用',
            value: '1',
          },
        ],
      },
    },
  ],
  wrapperClass: 'grid-cols-5',
};

export const gridOptions: VxeTableGridOptions = {
  columns: [
    { title: '菜单名称', field: 'menuName', align: 'left', treeNode: true },
    {
      title: '图标',
      field: 'icon',
      align: 'center',
      slots: { default: 'iconSpan' },
      width: 100,
    },
    { title: '路径', field: 'path', align: 'left', width: 460 },
    { title: '组件', field: 'menuLayout', align: 'left', width: 460 },
    { title: '排序', field: 'priority', width: 100 },
    { slots: { default: 'action' }, title: '操作', width: 160 },
  ],
  minHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await MenuAll({
          ...formValues,
        });
      },
      querySuccess: async ({ response }) => {
        MenuList.value = response.data;
      },
    },
    response: {
      list: 'data',
    },
  },
  treeConfig: {
    parentField: 'parentId',
    rowField: 'menuId',
    transform: true,
    expandAll: true,
  },
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑表单配置
export const formSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入分类编码',
    },
    fieldName: 'dicType',
    label: '分类编码',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入分类名称',
    },
    fieldName: 'dicTitle',
    label: '分类名称',
    rules: 'required',
  },
];

// 数据编辑
const buildTree = (data: Array<any>, menuId = 0) => {
  const tree = [];
  for (const item of data) {
    if (item.parentId == menuId) {
      const children = buildTree(data, item.menuId);
      if (children.length > 0) {
        item.children = children;
      }
      tree.push(item);
    }
  }
  return tree;
};
const isDir = (type: string) => type === '0';
const isMenu = (type: string) => type === '1';
const isButton = (type: string) => type === '2';
// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    fieldName: 'menuId',
    label: '菜单Id',
    component: 'Input',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    fieldName: 'type',
    label: '菜单类型',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '目录', value: '0' },
        { label: '菜单', value: '1' },
        /* { label: '按钮', value: '2' },*/
      ],
      optionType: 'button',
      buttonStyle: 'solid',
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入菜单名称',
      allowClear: true,
    },
    fieldName: 'menuName',
    label: '菜单名称',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入菜单编码',
      allowClear: true,
    },
    fieldName: 'menuCode',
    label: '菜单编码',
    rules: 'required',
  },
  {
    component: 'TreeSelect',
    componentProps: {
      placeholder: '请选择上级菜单',
      treeData: computed(() => {
        let arr: any = [];
        if (MenuList.value.length > 0) {
          let tree = [
            {
              children: buildTree(MenuList.value),
              menuName: '顶级菜单',
              parentId: null,
              menuId: '0',
            },
          ];
          arr = tree;
        }
        return arr;
      }),
      treeDefaultExpandedKeys: ['0'],
      allowClear: true,
      fieldNames: {
        key: 'menuId',
        value: 'menuId',
        label: 'menuName',
      },
    },
    fieldName: 'parentId',
    label: '上级菜单',
  },
  {
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入排序值',
    },
    fieldName: 'priority',
    defaultValue: 1,
    label: '排序值',
    rules: 'required',
  },
  {
    component: 'IconPicker',
    componentProps: {},
    fieldName: 'icon',
    label: '图标',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入路由地址',
      allowClear: true,
    },
    fieldName: 'path',
    label: '路由地址',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入组件路径',
      allowClear: true,
    },
    fieldName: 'menuLayout',
    label: '组件路径',
    dependencies: {
      show(values) {
        return isMenu(values.type);
      },
      triggerFields: ['type'],
    },
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '启用',
          value: 1,
        },
        {
          label: '禁用',
          value: 0,
        },
      ],
      optionType: 'button',
      buttonStyle: 'solid',
    },
    fieldName: 'status',
    defaultValue: 1,
    label: '状态',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '否',
          value: 0,
        },
        {
          label: '是',
          value: 1,
        },
      ],
      optionType: 'button',
      buttonStyle: 'solid',
    },
    fieldName: 'isExt',
    defaultValue: 0,
    label: '是否外链',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '是',
          value: 0,
        },
        {
          label: '否',
          value: 1,
        },
      ],
      optionType: 'button',
      buttonStyle: 'solid',
    },
    fieldName: 'show',
    defaultValue: 0,
    label: '是否显示',
  },
];
